<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example"></div>
</body>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
    class PostList extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                equipmentList:[
                    {
                        id:1,
                        title:'歼20'
                    },
                    {
                        id:2,
                        title:'轰6K'
                    },
                    {
                        id:3,
                        title:'运20'
                    }
                ],
                equipmentListNow:[]
            };
        }
        componentDidMount (){
            let _list=JSON.parse(JSON.stringify(this.state.equipmentList));
            this.setState({
                equipmentListNow:_list
            });
        }
        switchTab(id){
            let _list=JSON.parse(JSON.stringify(this.state.equipmentList));
            if(id){
                 _list=_list.filter(item=>item.id==id);
            }
            this.setState({
                equipmentListNow:_list
            });
        }
        render() {
            return (
                <div>
                    <a href="javascript:;" onClick={() => {
                        this.switchTab(1);
                    }}>歼击机</a>
                    <a href="javascript:;" onClick={() => {
                        this.switchTab(2);
                    }}>轰炸机</a>
                    <a href="javascript:;" onClick={() => {
                        this.switchTab(3);
                    }}>运输机</a>
                    <ul>
                        {this.state.equipmentListNow.map(item =><li key={item.id}>{item.title}</li>)}
                    </ul>
                </div>
            );
        }
    }

    ReactDOM.render(
            <PostList />,
        document.getElementById('example')
    );
   /*class PostList extends React.Component {
       constructor(props) {
           super(props);
           this.state = {
               text:'Hello React!'
           };
       }
       render() {
           return (
                   <div>
                       {this.state.text}
                   </div>
           );
       }
   }

   ReactDOM.render(
           <PostList />,
       document.getElementById('example')
   );*/
</script>
</html>